<template>
    <view class="list-container">
      <view v-for="(item, index) in listData" :key="index" class="list-item">
        <view class="item-header">
          <view class="left-content">
            <view class="company-name">{{ item.companyName }}</view>
            <view class="status" :class="{ 'status-completed': item.status === '已成交', 'status-pending': item.status === '未成交' }">
              {{ item.status }}
            </view>
          </view>
          <view class="edit-icon">编辑</view>
        </view>
        <view class="item-details">
          <view class="contact-info">
            <text>{{ item.contactName }}</text>
            <text>{{ item.phoneNumber }}</text>
          </view>
          <view class="creation-time">创建时间: {{ item.creationTime }}</view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  const listData = ref([
    {
      companyName: '广州景林贸易有限公司',
      status: '未成交',
      contactName: '马飞飞',
      phoneNumber: '135****5101',
      creationTime: '2024-08-26 13:22:30'
    },
    {
      companyName: '广州景林贸易有限公司',
      status: '已成交',
      contactName: '马飞飞',
      phoneNumber: '135****5101',
      creationTime: '2024-08-26 13:22:30'
    },
    // ... 可以添加更多数据项
  ])
  </script>
  
  <style lang="scss" scoped>
  .list-container {
    padding: 10px;
  }
  
  .list-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
  }
  
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .left-content {
    display: flex;
    align-items: center;
  }
  
  .company-name {
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
  }
  
  .status {
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 4px;
  }
  
  .status-completed {
    color: #4CAF50;
    background-color: #E8F5E9;
  }
  
  .status-pending {
    color: #FF9800;
    background-color: #FFF3E0;
  }
  
  .edit-icon {
    font-size: 14px;
    color: #2196F3;
  }
  
  .item-details {
    font-size: 14px;
    color: #666;
  }
  
  .contact-info {
    display: flex;
    gap: 10px; // 添加间距
    margin-bottom: 5px;
  }
  
  .creation-time {
    font-size: 12px;
  }
  
  // 删除之前的 .edit-icon 样式
  </style>